<!-- 设置-拆分订单时间点 -->
<template>
  <div class="set-split-time">
    <el-form
        :model="fm.ps"
        :ref="fm.fname"
        label-width="80px"
    >
        <el-form-item
            label="时间点"
            prop="time"
            :rules="[
                {required: true, message: '请选择拆分时间点'}
            ]"
        >
            <el-time-select
                v-model="fm.ps.time"
                :picker-options="{
                    start: fm.stime,
                    step: '00:05',
                    end: fm.etime,
                    minTime: fm.stime,
                    maxTime: fm.etime
                }"
                placeholder="请选择拆分时间点"
                style="width: 200px;"
            ></el-time-select>
        </el-form-item>

        <el-form-item
            label="结束位置"
            prop="point"
            :rules="[
            {required: true, message: '请选择拆分结束位置'}
            ]"
        >
            <el-select
                v-model="fm.ps.point"
                placeholder="请选择拆分结束位置"
                style="width: 200px;"
            >
                <el-option
                    v-for="(it, index) in fm.wpoints"
                    :key="index"
                    :label="it.name"
                    :value="index+'='+it.name"
                ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button @click="hidePop">取消</el-button>
            <el-button type="primary" size="mini" @click="submitFm">确定</el-button>
        </el-form-item>
    </el-form>
 </div>
</template>

<script>
export default {
  name: 'SetSplitTime',
  props: { myData: Object },
  data() {
    let o = this.myData.newDrs[0];
    return {
        fm: {
            fname: 'setSplitTimeFm',
            sb: { load: false, text: '确定拆分' },
            // 开始时间
            stime: o.stime.split(' ')[1],
            // 结束时间
            etime: o.etime.split(' ')[1],
            // 途经点数组
            wpoints: [],
            // 表单参数对象
            ps: {
                // 时间点
                time: '',
                // 结束地点 下标=地址 如：0=天府广场
                point: ''
            }
        }
    }
  },
  created(){
    const that = this, ps = that.fm.ps;
    // console.log('父组件传入的数据', that.myData);
    let o = that.myData.newDrs[0];
    if(o){
        let wpoints = [];
        // 上午行程地点数组
        o.amPoints.forEach(it => { wpoints.push(it); });
        // 午餐地点
        if(o.lunchPoint) wpoints.push(o.lunchPoint);
        // 下午行程地点数组
        o.pmPoints.forEach(it => { wpoints.push(it); });
        // 晚餐地点
        if(o.dinnerPoint) wpoints.push(o.dinnerPoint);
        that.fm.wpoints = wpoints;
    }
  },
  methods:{
    // 隐藏
    hidePop(){
        this.$emit('myClick', false);
    },
    // 提交表单
    submitFm(){
        const that = this, ps = that.fm.ps;

        that.$refs[that.fm.fname].validate((valid) => {
            if (!valid) {
                return false;
            }else{
                debugger
                let p = {
                    time: ps.time,
                    pointIndex: ps.point.split('=')[0],
                    point: that.fm.wpoints.find((it, i) => `${i}=${it.name}` == ps.point)
                };

                that.$emit('myClick', p);
            }
        });
    }
  },
}
</script>
